import React, { Component } from 'react';
import { withRouter,NavLink} from 'react-router-dom';
class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            curCls:1,
            curCls2:1,
        }
    }
    tabFn(e,index){
        this.setState({
            curCls:index,
        })
    }
    ulFn(e){
        // console.log(e.target.value)
        let index = e.target.getAttribute('data-index');
        let index3 = e.target.getAttribute('_index');
        let index2 =  e.target.dataset.index;
        this.setState({
            curCls2:index,
        })
    }
    render(){
        const { curCls,curCls2 } = this.state;
        return(
            <React.Fragment>
            <NavLink exact to="/">首页</NavLink><br/>
            <NavLink to="/tabbak">tabbak</NavLink><br/>
            <NavLink to="/newspage">newspage</NavLink><br/>
            <NavLink to="/tab">tab</NavLink><br/>
            <NavLink to="/page">page</NavLink><br/>
                <div className="m400">
                    <ul className="ltab_btn clearfix">
                        <li onClick={(e)=>{this.tabFn(e,1)}} className={curCls===1?'cur':''}>菜单一</li>
                        <li onClick={(e)=>{this.tabFn(e,2)}} className={curCls===2?'cur':''}>菜单二</li>
                        <li onClick={(e)=>{this.tabFn(e,3)}} className={curCls===3?'cur':''}>菜单三</li>
                    </ul>
                    <ol className="ltab_box">
                        <li className={curCls===1?'cur':''}>第一块内容</li>
                        <li className={curCls===2?'cur':''}>第二块内容</li>
                        <li className={curCls===3?'cur':''}>第三块内容</li>
                    </ol>
                </div>
                <div className="m400">
                    <ul className="ltab_btn clearfix" onClick={(e)=>{this.ulFn(e)}}>
                        <li data-index="1" _index="1" className={Number(curCls2)===1?'cur':''}>菜单一</li>
                        <li data-index="2" _index="2" className={Number(curCls2)===2?'cur':''}>菜单二</li>
                        <li data-index="3" _index="3" className={Number(curCls2)===3?'cur':''}>菜单三</li>
                    </ul>
                    <ol className="ltab_box">
                        <li className={Number(curCls2)===1?'cur':''}>第一块内容</li>
                        <li className={Number(curCls2)===2?'cur':''}>第二块内容</li>
                        <li className={Number(curCls2)===3?'cur':''}>第三块内容</li>
                    </ol>
                </div>
            </React.Fragment>
        )
    }

}







export default View;
